<script setup lang="ts">
import { ref, watch, onMounted, PropType } from 'vue';
import API from '@/services';
import {
  IconPlusCircleFill,
  IconCaretDown
} from '@arco-design/web-vue/es/icon';

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  options: {
    type: Array as PropType<any[]>,
    default: []
  },
  placeholder: {
    type: String,
    default: ''
  },
  allowClear: {
    type: Boolean, 
    default: true
  }
});
const emit = defineEmits(['update:modelValue', 'selectSearch']);


const value = ref();
const selectOptions = ref<any>([])
const remoteMethod = () => {
    emit('selectSearch')
}
watch(
  () => props.modelValue,
  (newVal) => {
    if (newVal !== value.value) {
      value.value = newVal || '';
    }
  }
);
watch(value, (newVal, preVal) => {
  if (newVal !== preVal) {
    emit('update:modelValue', newVal);
  }
});

onMounted(() => {

});
</script>
<template>
  <ASelect
    v-model="value"
    :style="{width: '100%'}"
    :options="props.options"
    :allow-clear="allowClear"
    :placeholder="props.placeholder"
  >
    <template #arrow-icon>
      <icon-caret-down />
    </template>
  </ASelect>
</template>
